import React from 'react';
import {
    Text,
    View,
    StyleSheet,
    TouchableOpacity,
    ImageBackground,
    Image
}from 'react-native'

import BasePage from '../BasePage'
import NavigationBar from 'teaset/components/NavigationBar/NavigationBar';
import Swiper from 'react-native-swiper'
import zhuwo from '../images/room/主卧.jpg'
import ciwo from '../images/room/次卧.jpg'
import chufang from '../images/room/厨房.jpg'
import weishengjian from '../images/room/卫生间.jpg'
import keting from '../images/room/客厅.jpg'
import moren from '../images/room/默认.jpg'
import PageView from '../Component/Common/PageView';
import EventStore from './EventStore';
import GateWayPage from './GateWay';
import AddDevicePage from './AddDevicePage'

var imageArr=[zhuwo,ciwo,keting,chufang,weishengjian,moren];


export default class SubRoomPage extends BasePage{
    renderNavigationBar(){
        return (
            <NavigationBar 
                title={this.state.title}
                // backgroundColor=''
                leftView={< NavigationBar.BackButton onPress={() => this.navigator.pop()} />}
            />
        );
    }
    constructor(props){
        super(props);
        this.state={
            title:'主卧'
        }
        
    }
    renderPage(){
        return (
            <Swiper style={styles.wrapper} onIndexChanged={(index)=>{
                switch(index){
                    case 0:
                        this.setState({
                            title:'主卧'
                        });
                        break;
                    case 1:
                    this.setState({
                            title:'次卧'
                        });
                        break;
                    case 2:
                    this.setState({
                            title:'客厅'
                        })
                        break;
                    case 3:
                    this.setState({
                            title:'厨房'
                        })
                        break;
                    case 4:
                    this.setState({
                            title:'卫生间'
                        })
                        break;
                    case 5:
                    this.setState({
                            title:'默认'
                        })
                        break;
                    default:
                }
            }}>
                {
                    imageArr.map((item,index)=>{
                        return (
                            <ImageBackground style={styles.slide1} source={imageArr[index]} >
                                <TouchableOpacity onPress={()=>{
                                    this.navigator.push({view:<AddDevicePage/>})
                                }}>
                                    <Image style={{ width:40, height:40,borderRadius:20 }} source={require('../images/addM.png')}/>
                                </TouchableOpacity>
                                <Text style={{textAlign:'center', color:'white', paddingTop:10}}>{'添加设备开启智能生活'}</Text>
                            </ImageBackground>);
                    })
                }
            </Swiper>
        );
    }
}


var styles = {
    wrapper: {
       
    },
    slide1: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    //   backgroundColor: '#9DD6EB'
    },
    slide2: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#97CAE5'
    },
    slide3: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#92BBD9'
    },
    text: {
      color: 'black',
      fontSize: 30,
      fontWeight: 'bold'
    }
  }